<template>
  <div class="container">
    <div class="top">
      <div @click="back"> 管理 >> <span>比赛安排</span></div>
      <div class="upload">
        <upload @getName="getName2" :type="'any'"></upload>
        <div class="text">
          url: {{ url }}
        </div>
      </div>
    </div>
    <div class="table">
      <el-tag>往期通知</el-tag>
      <div style="height: 20px;"></div>
      <div style="width: 100%;">
        <el-table ref="tableRef" row-key="time" :data="tableData[0]" style="width: 100%">
          <el-table-column
              prop="time"
              label="日期"
              sortable
              width="180"
              column-key="time"
          />
          <el-table-column prop="text" label="内容" width="180"/>


          <el-table-column fixed="right" label="Operations" width="120">
            <template #default="scope">
              <el-button
                  link
                  type="primary"
                  size="small"
                  @click.prevent="deleteRow(scope.$index)"
              >
                Remove
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <el-dialog v-model="centerDialogVisible" title="Warning" width="30%" center>
    <span>
     确认删除吗？？？
    </span>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="centerDialogVisible = false">Cancel</el-button>
        <el-button type="primary" @click="confirm">
          Confirm
        </el-button>
      </span>
      </template>
    </el-dialog>

    <v-md-editor v-model="text"
                 height="700px"
                 left-toolbar=" tip emoji | h bold italic strikethrough quote | ul ol table hr | link image code | save"
                 :toolbar-config="{
  'image-link': {
    // 是否在插入图片链接的时候默认带上width height 属性，默认值：false
    insertWithSize: true
  }
}"
                 @save="issue"></v-md-editor>
  </div>
</template>

<script setup>
import {useRouter} from "vue-router";
import {inject, onMounted, reactive, ref} from "vue";
import upload from '@/components/upload'

const centerDialogVisible = ref(false)

const id = ref(0)
const axios = inject("$axios")
const baseUrl = inject("$baseURL")

const tableData = reactive([[]])
onMounted(() => {
  axios.get("notice/list").then(res => {
    tableData[0] = res.data.map(i => {
      i.time = i.time.substring(0, i.time.indexOf('T'))
      i.text = i.text.substring(0, i.text.indexOf('\n'))
      return i
    })
  })
})
const url = ref("")
const text = ref("")
const router = useRouter()
const back = () => router.push('/manage')
const getName2 = (value) => {
  url.value = baseUrl + '/mp4/' + value.value
}
const form = reactive({
  text: ""
})
const issue = (text, html) => {
  console.log(text, html)
  form.text = text
  axios.post("notice", form).then(res => {
    ElMessage({
      message: "发送成功",
      type: "success"
    })
    setTimeout(() => {
      router.back()
    }, 1000)
  })
}
const deleteRow = (e) => {
  centerDialogVisible.value = true
  id.value = tableData[0][e].id
}

const confirm = () => {

  axios.get('notice/delete?id=' + id.value).then(res => {
    window.location.reload()
  })

  centerDialogVisible.value = false
}
</script>

<style scoped lang="less">
.container {
  font-size: 14px !important;
  width: 90%;
  max-width: 1200px;
  margin: 10px auto;
  padding-bottom: 20px;

  .top {
    font-size: 14px;
    color: #A8ABB2;
    margin: 20px;
    display: flex;
    justify-content: space-between;

    .text {
      transform: translateY(-20px);
      margin-right: 20px;
      color: #409EFF;
      font-weight: 700;
    }

    span {
      color: #409EFF;
    }
  }
}

.table {
  width: 100%;
  margin-bottom: 10px;
}
</style>